---
import type { HTMLTag } from "astro/types";
interface Props {
  level: 1 | 2 | 3 | 4 | 5 | 6;
  id?: string;
}

const Tag = `h${Astro.props.level}` as HTMLTag;
const children = await Astro.slots.render("default");
const id = Astro.props.id ?? children.toLowerCase().replace(/\s/g, "-");
---

<Tag class="heading" id={id}>
  <a href={`#${id}`}>
    <Fragment set:html={children} /><span class="hash" aria-hidden="true"
      >#</span
    >
  </a>
</Tag>

<style>
  a {
    --a-color: currentColor;
    text-decoration: none;
  }

  .heading:target .hash {
    color: var(--color-accent);
    opacity: 1;
  }

  .hash {
    visibility: hidden;
    opacity: 0.5;
    padding-inline-start: var(--space-3xs);
  }

  a:is(:hover, :focus-visible) .hash {
    visibility: visible;
  }
</style>
